<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户查询</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script type="application/javascript" src="../js/jquery-1.8.3.min.js"></script>
</head>
<body>

<form class="layui-form" id="test3" style="display:none" lay-filter="example">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="text" name="id" class="layui-input" id="id" type="hidden">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" placeholder="请输入新密码" autocomplete="on" class="layui-input" id="password"
                   style="width:100px">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <textarea lay-verify="required" name="status" id="status" placeholder="请输入内容"
                      class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>

<div id="content">
    <div class="layui-fluid">
        <blockquote class="layui-elem-quote">
            查询条件
        </blockquote>
    </div>
    <div class="demoTable">
        用户名：
        <div class="layui-inline">
            <input class="layui-input" name="username" id="test1" autocomplete="off">
        </div>
        用户状态：
        <div class="layui-inline">
            <input class="layui-input" name="status" id="test2" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <div>
        <table class="layui-hide" id="test" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</div>

</body>

<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table
        ,form = layui.form;

        table.render({
            elem: '#test'
            , url: '/oasys/user/findAll.do'
            , page: true
            , toolbar: 'default'
            , totalRow: true
            , cols: [[
                {field: 'id', title: 'ID', sort: true}
                , {field: 'loginname', title: '登录名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'username', title: '用户名', sort: true}
                , {field: 'status', title: '状态'}
                , {field: 'createDate', title: '创建时间'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , id: 'transferTable'
        });

        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;

            if (obj.event === 'detail') {

                layer.alert('用户信息：<br>' + JSON.stringify(data))
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    console.log(data.id)
                    $.ajax({
                        url: '/oasys/user/delete.do?id=' + data.id,
                        type: 'delete',
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == 1) {
                                console.log(data);
                                layer.alert(data.data);
                                location.reload(); //删除成功后再刷新
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                // layer.alert('编辑行：<br>'+ JSON.stringify(data))
                layer.open({
                    type: 1,
                    area: ['500px', '600px'],
                    title: '修改信息',
                    content: $("#test3"),
                    shade: 0,
                    cancel: function (layero, index) {
                        layer.closeAll();
                    }
                });
                $.ajax({
                    type: 'get',
                    url: 'findById.do',
                    data: {id:data.id},
                    dataType: 'json',
                    success: function (data) {
                        console.log(data.info)
                        //表单赋值
                        form.val('example', {
                            "id": data.info.id,
                            "password":data.info.password,
                            "status":data.info.status
                        });
                    }
                });
            }
        });

        //搜索框有效果的情况
        var active = {
            reload: function () {
                //执行重载
                table.reload('transferTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {//额外需要提交的参数
                        username: $("#test1").val(),
                        status:$("#test2").val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            console.log(data.field)
            $.ajax({
                type: 'post',
                url: 'update.do',
                data: data.field,
                dataType: 'json',
                success: function (data) {
                    alert(data.info);
                    window.location.reload();
                }
            });
            return false;
        });
    });
</script>

</html>
